﻿(function ($) {
    $.fn.message = function (options) {

        var $settings = $.extend({
            'messageType': 'info',
            'useInternalStyle': true,
            'title': '',
            'showAnimateSpeed': 500,
            'timeoutShow': 0
        }, options);

        var $this = this;

        if ($settings['useInternalStyle']) {
            if (!$('head #messages-style').is('style')) {
                $('<style type="text/css" id="messages-style">' + messageStyle + '</style>').appendTo($('head'));
            }
        }
        $('.message').remove(); // usuwamy istniejącą wiadomość
        var $message = $('<a href="#" class="message-' + $settings['messageType'] + ' message"></a>');
        if ($settings['title'] != '')
            $message.append($('<h3>' + $settings['title'] + '</h3>'));
        $message.append($('<p>' + this.text() + '</p>'));

        var $progBar = $('<div class="message-progress-wrap"><div class="message-progress"></div></div>');
        if ($settings['timeoutShow'] > 0)
            $message.append($progBar);

        $message.attr('title', 'Kliknij, aby zamknąć');
        $message.click(function (e) {
            e.preventDefault();
            $(this).animate({ bottom: '-' + $(this).outerHeight() + 'px' }, $settings['showAnimateSpeed'], 'easeInQuint');
        });

        $message.appendTo($('body'));
        $message.css('bottom', '-' + $message.outerHeight() + 'px');
        $message.animate({ bottom: '0px' }, $settings['showAnimateSpeed'], 'easeOutQuint');

        if ($settings['timeoutShow'] > 0) {
            $progBar.fadeOut($settings['timeoutShow'] * 2);
            $progBar.find('.message-progress').animate({ width: '100%' }, $settings['timeoutShow'], function () {
                $message.animate({ bottom: '-' + $message.outerHeight() + 'px' }, $settings['showAnimateSpeed'], 'easeInQuint');
            });
        }

    }
})(jQuery);


var messageStyle = ' \
a.message { \
display:block;\
    background-size: 40px 40px;\
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,\
                        transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,\
                        transparent 75%, transparent);										\
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);\
    width: 98%;\
    border: 1px solid;\
    color: #fff;\
    text-decoration:none;\
    padding: 1%;\
    position: fixed;\
    _position: absolute;\
    text-shadow: 0 1px 0 rgba(0,0,0,.5);\
    animation: animate-bg 5s linear infinite;\
    z-index: 1000;\
}\
\
.message-progress-wrap{\
background-color:rgba(255,255,255,0.3);\
height:12px;\
-webkit-box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.2);\
box-shadow: inset 0px 1px 1px 0px rgba(0, 0, 0, 0.2);\
margin-top:10px;\
}\
\
.message-progress{\
background-color:rgba(255,255,255,0.5);\
height:100%;\
width:0%;\
background: rgb(255,255,255); /* Old browsers */\
background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); /* FF3.6+ */\
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */\
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */\
background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */\
background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* IE10+ */\
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); /* W3C */\
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=\'#ffffff\', endColorstr=\'#e5e5e5\',GradientType=0 ); /* IE6-9 */\
\
}\
    .message-info{\
        background-color: #4ea5cd;\
        border-color: #3b8eb5;\
    }\
\
    .message-error{\
        background-color: #de4343;\
        border-color: #c43d3d;\
    }\
		 \
    .message-warning{\
        background-color: #eaaf51;\
        border-color: #d99a36;\
    }\
\
    .message-success{\
        background-color: #61b832;\
        border-color: #55a12c;\
    }\
\
    .message h3{\
        margin: 0 0 5px 0;													 \
    }\
\
    .message p{\
        margin: 0;													 \
    }\
\
@keyframes animate-bg {\
    from {\
        background-position: 0 0;\
    }\
    to {\
        background-position: -80px 0;\
    }\
}';